<template>
  <Layout class-name="bgff layout-bg home showH">
    <!-- 顶部导航 -->
    <!-- <fa-navbar title="首页" :border-bottom="false"></fa-navbar> -->
    <view class="search-box-box" :style="{top: topH+'px', height:capsuleH+'px', paddingRight:capsuleRight}">
      <view class="search-box box u-flex" @click="goSearch">
        <u-icon name="search" color="#05B196" size="36"></u-icon>
        <input type="text" class="text u-m-l-15" v-model="keyword" disabled placeholder="请输入关键字" />
        <view class="zz-bg"></view>
      </view>
    </view>
    <view class="main-box home-banner">
      <template v-if="banner && banner.length > 0">
      	<u-swiper :list="banner" name="image_desc" @click="bannerTo(banner, swiperIndex)" @change="swiperChange" height="540" border-radius="0"></u-swiper>
      </template>
      
      <!-- banner -->
      <!-- <swiper class="banner" style="height: 540rpx;" :autoplay="true" 
    :circular="true" 
    :interval="5000" 
    :duration="500">
      	<swiper-item v-for="(item, key) in banner" :key="key">
      		<image :src="item.image_desc" mode="aspectFill" class="img" @click="bannerTo(item)"></image>
      	</swiper-item>
      </swiper> -->
      <view class="main1 paddLR bgff u-flex u-row-between">
        <view v-for="(item, index) in navList" :key="index" class="item" @click="linkTo(item.path)">
          <image :src="item.icon" class="icon" mode=""></image>
          <view class="name">{{item.name}}</view>
        </view>
      </view>
      <!-- tab栏 -->
      <view class="main2 box">
        <view class="m2-tab u-flex u-row-between">
          <template v-for="(item, index) in tabList">
            <view class="item" :class="{on: index === tabIdx}" @click="tabIdx = index">
              <view class="name">{{item.name}}</view>
              <view class="intro">{{item.intro}}</view>
            </view>
            <view class="line"></view>
          </template>
        </view>
        <!-- 文创特产 -->
        <view v-show="tabIdx === 2" class="wenchuang-list">
          <navigator :url="'/pages/goods/detail?id='+item.id" v-for="(item, index) in shopData.list" :key="index" class="item">
            <view class="imgW"><image :src="item.image" class="img" mode=""></image></view>
            <view class="name u-line-2">{{item.title}}</view>
            <view class="flex-bect">
              <view class="color-red price">￥{{item.price}}</view>
              <!-- <view class="color-999">已售{{item.sales}}</view> -->
            </view>
          </navigator>
        </view>
        <!-- 赛事 -->
        <view v-show="tabIdx === 1" class="shaishi-list">
          <match-item v-for="(item, index) in matchData.list" :key="index" :item="item" @toDetail="goMatchDetail" />
          <!-- <view v-for="(item, index) in matchData.list" :key="index" class="match-item" @click="goMatchDetail(item.id)">
            <view class="imgW">
              <image :src="item.image_text" class="img" mode=""></image>
              <view class="icon" :class="{'bg-red': item.status === 1, 'bg-origin': item.status===2}">
                <template v-if="item.status == 3">待开赛</template>
                <template v-if="item.status == 2">报名中</template>
                <template v-if="item.status == 5">已结束</template>
              </view>
            </view>
            <view class="div">
              <view class="name u-line-2">{{item.title}}</view>
              <view class="hours">
                <view class="">{{item.views}}+阅读</view>
                <view class="">{{item.release_time_text}}</view>
              </view>
            </view>
          </view> -->
          <navigator url="/home/away?type=2" class="u-font-26 color-primary flex-ct u-m-t-40">查看更多赛事 <u-icon name="arrow-right" color="#05B196" size="24"></u-icon></navigator>
        </view>
        <!-- 瀑布流 -->
        <view class="flow-box" :class="tabIdx == 0 ? 'show' : ''">
          <custom-waterfalls-flow :value="traveData.list" image-key="image_text" @wapperClick="goDetail"></custom-waterfalls-flow>
        </view>
        
        
      </view>
      
    </view>
    
  </Layout>
</template>

<script>
import orderUtils from '@/utils/index.js';
export default {
	
	data() {
		return {
			keyword:'',
      navList:[
        {id:1, name:'扫一扫', icon: require('@/static/image/home-nav-icon1.png'), path:''},
        {id:2, name:'开溜吧', icon: require('@/static/image/home-nav-icon2.png'), path:'/home/away'},
        {id:3, name:'开吃吧', icon: require('@/static/image/home-nav-icon3.png'), path:'/home/eat'},
        {id:4, name:'开购吧', icon: require('@/static/image/home-nav-icon4.png'), path:'/pages/goods/goods'}
      ],
      tabList:[
        {name:'攻略推荐', intro:'官方推荐'},
        {name:'活动赛事', intro:'最新推荐'},
        {name:'文创特产', intro:'品质严选'}
      ],
      tabIdx:0,
      imgList: [
        { image: require('@/static/image/404.png'), title: '安徽旅游 | 阜阳最值得去的9个景点', address: '八里河旅游区·阜阳1' },
        { image: require('@/static/image/label.png'), title: '阜阳颍上管仲老街，灯火璀璨的人间福地，诉说着一代...', address: '八里河旅游区·阜阳2' },
        { image: require('@/static/image/404.png'), title: '安徽旅游 | 阜阳最值得去的9个景点', address: '八里河旅游区·阜阳1' },
        { image: require('@/static/image/404.png'), title: '安徽旅游 | 阜阳最值得去的9个景点', address: '八里河旅游区·阜阳1' },
        { image: require('@/static/image/label.png'), title: '阜阳颍上管仲老街，灯火璀璨的人间福地，诉说着一代...', address: '八里河旅游区·阜阳2' },
        { image: require('@/static/image/label.png'), title: '阜阳颍上管仲老街，灯火璀璨的人间福地，诉说着一代...', address: '八里河旅游区·阜阳2' },
      ],
      traveData:{
        page:1,
        list:[],
        isLast:false,
      },
      matchData:{
        page:1,
        list:[],
        isLast:false,
      },
      shopData:{
        page:1,
        list:[],
        isLast:false,
      },
      banner:[],
      topH1:0,
      swiperIndex:0,
      capsuleH:'',
      capsuleTop:'',
      capsuleRight1:0,
      capsuleRight:0,
		};
	},
  computed: {
    topH() {
      const systemInfo = uni.getSystemInfoSync();
      // 通常顶部导航栏高度：iOS 一般为 44 或 48，Android 一般为 48 或 56
      // 这里根据你的设计调整
      console.log('systemInfo-----------', systemInfo)
      let navBarHeight = systemInfo.platform === 'ios' ? 44 : 48;
      if(this.$store.state.navfixed){
        this.capsuleRight = this.capsuleRight1;
        return this.capsuleTop;
      }else{
        this.capsuleRight = 0;
        return systemInfo.statusBarHeight + navBarHeight;
      }
      // 判断是否固定导航栏
      
    }
  },
  onShow() {
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.capsuleH = menuButtonInfo.height;
    this.capsuleTop = menuButtonInfo.top;
    const systemInfo = uni.getSystemInfoSync()
    this.capsuleRight1 =  (systemInfo.windowWidth - menuButtonInfo.right - 20) + 'px'
    let height = systemInfo.platform == 'ios' ? 44 : 48;
    this.topH = systemInfo.statusBarHeight + height;
  	this.getList1()
  	this.getList2()
  	this.getList3();
    
    this.$api.bannerApi({}).then(res=>{
      this.banner = res.data
    })
  },
	methods: {
    swiperChange(index) {
    	this.swiperIndex = index;
    },
    getList1(){
      this.$api.traveListsApi({page: this.traveData.page}).then(res=>{
        if(!this.traveData.isLast) {
          this.traveData.page++;
          this.traveData.list = [...this.traveData.list, ...res.data.data];
          this.traveData.isLast = false;
        }else{
          this.traveData.isLast = true;
        }
        console.log('this.traveData----------', this.traveData)
      })
    },
    // 赛事
    getList2(){
      this.$api.activityListsApi({page: this.matchData.page}).then(res=>{
        if(!this.matchData.isLast) {
          this.matchData.page++;
          this.matchData.list = [...this.matchData.list, ...res.data.data];
          this.matchData.isLast = false;
        }else{
          this.matchData.isLast = true;
        }
        console.log('this.matchData----------', this.matchData)
      })
    },
    // 商城
    getList3(){
      this.$api.getGoodsList({page: this.shopData.page}).then(res=>{
        if(!this.shopData.isLast) {
          this.shopData.page++;
          this.shopData.list = [...this.shopData.list, ...res.data.data];
          this.shopData.isLast = false;
        }else{
          this.shopData.isLast = true;
        }
        console.log('this.shopData----------', this.shopData)
      })
    },
    bannerTo(banner, index){
      const item = banner[index]
      console.log('item--', item)
      if(item.type_id == 1){ // 开溜吧列表
        uni.navigateTo({
          url:'/home/away'
        })
      }else if(item.type_id == 2){ // 开购吧列表
        uni.navigateTo({
          url:'/pages/goods/goods'
        })
      }else if(item.type_id == 3){ // 开吃吧列表
        uni.navigateTo({
          url:'/pages/home/eat'
        })
      }else if(item.type_id == 4 && item.article_id){ // 旅游攻略详情
        uni.navigateTo({
          url:'/home/strategy_detail?type=1&id='+item.article_id
        })
      }else if(item.type_id == 5 && item.article_id){ // 活动赛事详情
        uni.navigateTo({
          url:'/home/match/detail?id='+item.article_id
        })
      }else if(item.type_id == 6 && item.article_id){ // 美食推荐详情
        uni.navigateTo({
          url:'/home/strategy_detail?type=2&id='+item.article_id
        })
      }else if(item.type_id == 7 && item.article_id){ // 开购吧详情
        uni.navigateTo({
          url:'/home/goods/detail?id='+item.article_id
        })
      }
    },
    goSearch(){
      uni.navigateTo({
        url:'/home/search/index'
      })
    },
    linkTo(path){
      if (path === '') {
        uni.scanCode({
          success(res) {
            console.log('res.path-----------',res.path)
            if (res.path) {
              uni.navigateTo({
                url: `/${res.path}`
              })
            } else {
              uni.showToast({
                title: '非法二维码',
                icon: 'error'
              })
            }
          }
        });
        return;
      }
      uni.navigateTo({
        url:path
      })
    },
    goDetail(item){
      uni.navigateTo({
        url:'/home/strategy_detail?type=1&id='+item.id
      })
    },
    // 赛事详情
    goMatchDetail(item){
      uni.navigateTo({
          url:'/home/match/detail?id='+item.id
        })
    }
	},
	onPageScroll(e) {
		getApp().setNavFixed(this,e)
	},
	onReachBottom() {
		if(!this.traveData.isLast){
      this.getList1()
    }
    if(!this.matchData.isLast){
      this.getList2()
    }
    if(!this.shopData.isLast){
      this.getList3()
    }
	}
};
</script>

<style lang="scss">
// page {
// 	background-color: #f4f6f8;
// }
</style>
<style lang="scss" scoped>
  .banner{
    .img{display: block; width: 100%; height: 540rpx;}
  }
  .main-box{position: relative; z-index: 1;}
  .text{background-color: transparent;}
  .search-box{
    background-color: rgba(255,255,255,0.6); border-radius: 40rpx; height: 80rpx; padding-left: 32rpx;
    .zz-bg{position: absolute; width: 100%; height: 100%; left: 0; top:0; top: 20;}
  }
  .search-box-box{ position: fixed; width: 100%; left: 0%; z-index: 98; top: 180rpx; top: 100rpx; transition: all ease .3s;}
  .navbg {
    // .search-box-box{width: calc(100% - 200rpx);}
    .search-box-box{background-color: transparent; } // box-shadow: 0px 0px 10px #ddd;
    .search-box{background-color: #f9f9f9; border: 1px solid #ebebeb;}
  }
  
  // .search-box-box{top: 0 !important; padding-top:20rpx !important;padding-bottom: 20rpx !important;}
  
  .banner{position: relative; z-index: 1;}
  .main1{
    border-radius: 20rpx 20rpx; padding: 30rpx 0 55rpx; margin-top: -40rpx; position: relative;z-index: 987;
    .item{position: relative;}
    .icon{width: 138rpx; height: 189rpx;}
    .name{width: 100%; text-align: center; font-size: 24rpx; color: #fff; position: absolute; left: 0; bottom: 26rpx; font-weight: bold;}
  }
  .main2{
    position: relative; z-index: 20;
    .m2-tab{
      height: 133rpx;
      background: linear-gradient(0deg,#ffffff 0%, #b4dad0 100%), #fefefe;
      border-radius: 20rpx 20rpx 0px 0px;
      .name{font-size: 32rpx; color: #333; margin-bottom: 10rpx;}
      .intro{color: #888; font-size: 22rpx; display: flex; width: 130rpx; height: 32rpx; align-items: center; justify-content: center; margin: 0 auto;}
      .on{
        .name{font-weight: bold; color: #000;}
        .intro{background-color: #4FAD95; border-radius: 16rpx; color: #fff;}
      }
      .item{width: 30%; text-align: center;}
      .line{width: 2rpx; height: 30rpx; background-color: #AED3CA;}
    }
  }
  
  
</style>
